v-model
双向绑定值
v-for
循环输出
1
| <li v-for="item in list_data">{{ item }}</li> <!-- 使用v-for循环出数据 -->
|
v-on：click
定义事件
1
| <button v-on:click="submitBtn">确认</button>
|
methods
写方法的地方
1
2
3
4
5
6
7
| methods:{
submitBtn: function(){ // 定义一个onclick点击方法
// alert(this.inputValue) // 取到文本框中绑定的值
this.list_data.push(this.inputValue) // 将文本框中输入值放入到循环显示的列表中
this.inputValue = "" // 将文本框清空
}
}
|
完整代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--引入vue.js-->
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
请输入要显示的列表: <input type="text" v-model="inputValue"></input> <!-- 使用v-model进行数据的双向绑定 -->
<button v-on:click="submitBtn">确认</button> <!-- 使用v-on:click定义一个onclick点击事件 -->
<ul>
<li v-for="item in list_data">{{ item }}</li> <!-- 使用v-for循环出数据 -->
</ul>
</div>
<script type="text/javascript">
var app = new Vue({ // 实例化一个Vue
el: "#app", // 使用el绑定
data :{
"list_data": ["1111", '2222', '3333'], // 初始赋值
"inputValue" : ""
},
methods:{
submitBtn: function(){ // 定义一个onclick点击方法
// alert(this.inputValue) // 取到文本框中绑定的值
this.list_data.push(this.inputValue) // 将文本框中输入值放入到循环显示的列表中
this.inputValue = "" // 将文本框清空
}
}
})
</script>
</body>
</html>
|